<template>
  <div id="main">
    <div class="tagmain">
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <div class="tagbar">
      <ul class="flex flex-middle">
        <li class="flex-auto" v-for="(item, index) in menu">
          <router-link :to="{path: item.link}">
            <div><i class="icon" :class="icon[index]"></i></div>
            <div>{{item.label}}</div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { isWechat, getPublicWechatConfig } from '../libs/fn'
export default{
  name: 'main',
  created() {
    if(isWechat()) {
      getPublicWechatConfig(window.location.href)
    }
    this.$wechat.ready(() => {
      this.$wechat.onMenuShareAppMessage(this.wechatShareConfig)
      this.$wechat.onMenuShareTimeline(this.wechatShareConfig)
      this.$wechat.onMenuShareWeibo(this.wechatShareConfig)
      this.$wechat.onMenuShareQZone(this.wechatShareConfig)
    })
  },
  computed: {
    menu() {
      const { service_id } = this.$store.state.userInfo
      let menuItem = [{
          label: '待报价',
          link: 'index'
      }, {
          label: '运单',
          link: 'order'
      }, {
          label: '我的车队',
          link: 'driver'
      }, {
          label: '个人中心',
          link: 'userPage'
      }]

      let menuItem2 = [{
        label: '待报价',
        link: 'index'
      }, {
        label: '已报价',
        link: 'bid2'
      }, {
        label: '运单',
        link: 'order'
      }, {
        label: '个人中心',
        link: 'userPage'
      }]
      return service_id == 8? menuItem2: menuItem
    }
  },
  data() {
    return {
      icon: ['icon-ziyuan3', 'icon-yibaojia', 'icon-yundan', 'icon-siji', 'icon-user2'],
      wechatShareConfig: {
        title: '刚用了途鸟运力，体验超棒！您也来试一下呗！',
        desc: '我正在使用途鸟运力赚钱，这里货源多、质量好，优质企业和商户都在用途鸟配送发货了！快跑起来吧！马上注册。',
        link: $config.wechatHost + '/?#',
        imgUrl: $config.wechatHost + '/static/img/applogo.png'
      },
      showPai: false,
      showPic: false,
      link: ''
    }
  },
  updated() {
    this.link = this.$route.path.replace('/','')
  },
  methods: {
    handleChangeMenu(showPai) {
      this.showPai = showPai
    },
    handleNull(showPic) {
      this.showPic = showPic
    }
  }
}
</script>
<style scoped>
  .tagmain{
    margin-bottom: 1.5rem;
  }
  .tagbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.15rem;
    background: #fff;
    box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.1);
  }
  .tagbar ul{
    text-align: center;
    height: 1.2rem;
  }
  .tagbar a{
    display: inline-block;
    width: 100%;
  }
  .tagbar .router-link-active, .tagbar .router-link-active icon{
    color: #f3532c !important;
  }
</style>
